<template>
    <div class='login_box'>
        <div class="header">
          <h4>欢迎登录小米有品</h4>
        </div>
        <div class="main">
          <template v-if='type==1'>
            <!-- 用户名密码方式 -->
            <div class="inpBox" key = '100'>
              <input type="text" placeholder="用户名/手机号" v-model='account'>
            </div>
            <div class="inpBox" key='101'>
              <input type="password" placeholder="密码" v-model='password'>
            </div>
          </template>
          <template v-else>
            <div class="inpBox" key='3'>
              <input type="text" placeholder="手机号" v-model='account'>
            </div>
            <div class="inpBox" key = '4'>
              <input type="text" placeholder="短信验证码" v-model='password'>
              <a
                :class="{noClick:isRun}"
                @click='getCode'
              >
                {{isRun ? `${runTime}秒后重新获取` : "获取验证码"}}
              </a>
            </div>
          </template>
          <button
            class="submit"
            @click='login'
          >
            立即登录
          </button>
          <span
            class='changeBtn'
            @click='changeType'
          >
            {{type === 2 ? '用户名密码登录' : '短信验证码登录'}}
          </span>
        </div>
        <div class="register">
          <router-link to="/register">立即注册</router-link>
          |
          <a>忘记密码</a>
        </div>

        <div class="other">
          <span>其他登录方式</span>
          <div>
            <a class='iconfont icon-xinlang'></a>
            <a class='iconfont icon-zhifubao'></a>
            <a class='iconfont icon-gongzhonghao'></a>
          </div>
        </div>

        <div class="footer">
          <span>首页</span>|<span>简体</span>|<span>English</span>|<span>常见问题</span>|<span>隐私政策</span>
        </div>
    </div>
</template>
<script>
// @ is an alias to /src
import {login,getCode} from '@/api/api'
export default {
    name: 'loginPage',
    data() {
        return {
          type:1,
          account:'',
          password:'',
          isRun:false, // 控制用户是否点击了 获取验证码
          runTime:30
        }
    },
    methods: {
      login(){
        login({
          account:this.account,
          password:this.password,
          type:this.type
        }).then(data=>{
          console.log(data)
          if(data.code == 0){
            this.$store.commit('changeUserInfo',data.data)
            this.$dialog.alert({
              message: '登录成功'
            }).then(()=>{
              this.$router.replace('/user')
            })
          }else{
            this.$dialog.alert({
              message: data.codeText||"系统繁忙"
            })
          }
        })
      },
      getCode(){
        if(this.isRun)return;
        // 先获取当前电脑时间 在当前时间的基础上加30秒 算出 结束时间
        // 倒计时 不采用--的方式  采用 当前时间到目标时间的描述
        this.isRun = true;
        this.timer = setInterval(() => {
          this.runTime --;
          if(this.runTime == 0){
            clearInterval(this.timer)
            this.isRun = false;
            this.runTime = 30
          }
        }, 1000);
        getCode(this.account)
      },
      changeType(){
        this.type = this.type == 1 ? 2 : 1
        this.account='';
        this.password=''
      }
    },
    components: {
        
    }
}
</script>
<style lang="less">
@import url('../assets/login.less');
</style>